JSX (JavaScript)
part 4/5 · 7.2 KB total
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
const sections = [1, 2, 3];
return (
<div>
{sections.map((n,i) => (
// 'key' est utilisé par react pour pister les items de la liste et leurs changements.
// Chaque valeur 'key' doit être unique.
<div key={"section-" + n}>
Section {n} {i === 0 && <span>(first)</span>}
</div>
))}
</div>
);
}
Ce qui précède affichera :
<div>
<div>Section 1<span>(first)</span></div>
<div>Section 2</div>
<div>Section 3</div>
</div>
Le code écrit en JSX nécessite une conversion avec un outil tel que Babel avant de pouvoir être compris par les navigateurs Webcite-ref-5[5]. Ce traitement est généralement effectué au cours d'un processus de création de logiciel avant le déploiement de l'application.
Notes et références
cite-note-11. ↑ « Draft: JSX Specification », JSX, Facebook (consulté le 7 avril 2018)
cite-note-22. ↑ clark2017Clark, « React v16.0§New render return types: fragments and strings », React Blog, 26 septembre 2017
cite-note-33. ↑ « React.Component: render », React
cite-note-44. ↑ clark2017Clark, « React v16.0§Support for custom DOM attributes », React Blog, 26 septembre 2017
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────